<template>  
    <div class="danmu-container">  
      <!-- <div  
        v-for="(message, index) in messages"  
        :key="index"  
        class="danmu"  
        :style="{ animationDuration: `${messageDuration}s` }"  
      >  
        {{ message.text }}  
      </div>   -->
        <div  
            class="danmu2"  
            :style="{ animationDuration: `${messageDuration}s` }" 
        >  
            <div
                v-for="(message, index) in messages"  
                :key="index"  
                class="danmu3"  
            >
                {{ message.text }} 
            </div>
            
        </div> 
    </div>  
  </template>  
    
  <script lang="ts">  
  export default {  
    name: "Danmu",  
    props: {  
      messages: {  
        type: Array,  
        default: () => [],  
      },  
      messageDuration: {  
        type: Number,  
        default: 10, // 弹幕从右到左的时间，可以根据需要调整  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .danmu-container {  
    position: absolute;
    bottom: 0vw;
    left: 0;
    width: 100vw;
    height: 5vw;
    overflow: hidden;
  }  
    
  .danmu {  
    position: absolute;  
    white-space: nowrap;  
    top: 50%;  
    transform: translateY(-50%);  
    font-size: 18px;  
    padding: 5px 10px;  
    border-radius: 5px;  
    background-color: rgba(255, 255, 255, 0.7);  
    color: #333;  
    animation: moveDanmu linear infinite;  
    will-change: transform;  
  }  
  .danmu2 {  
    position: absolute;  
    white-space: nowrap;  
    top: 50%;  
    transform: translateY(-50%);  
    font-size: 18px;  
    
    animation: moveDanmu linear infinite;  
    will-change: transform;  
    display: flex;
    justify-content: flex-start;
  }  
    .danmu3 {
        margin: 0 10px; 
        padding: 5px 10px; 

        border-radius: 5px;  
        background-color: rgba(255, 255, 255, 0.7);  
        color: #333;  
    }
    
  @keyframes moveDanmu {  
    from {  
      transform: translateX(100vw);  
    }  
    to {  
      transform: translateX(-100%);  
    }  
  }  
  </style>